<template>
  <div>
    <scroll-view
      class="scroll-wrap no-scroll-bar scroll-list"
      style="height:calc(100%)"
      scroll-y
      @scrolltolower="handleLoadMore"
    >
      <div
        v-for="(item,index) in list"
        :key="index"
        class="contBox"
        @click="selectCheck(item)"
      >
        <i-checkbox-group @change="selectCheck(item)">
          <i-checkbox position="left" :checked="item.isSelect" color="#5b94f6"></i-checkbox>
        </i-checkbox-group>
        <img :src="item.goodsImg" alt="img" mode="scaleToFill" class="goodsImg" />
        <div class="textInfo">
          <p>{{item.goodsName}}</p>
          <p>规格：{{item.goodsSpec ? item.goodsSpec : '无规格'}}</p>
          <p>库存：{{item.goodsStock}}</p>
          <p>￥{{item.goodsDiscount}}</p>
        </div>
      </div>

      <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
    </scroll-view>

    <div class="kong"></div>
    <div class="navClick" @click="putawayClick">
      <p>{{isShelf === '1' ? '下架' : '上架'}}</p>
    </div>
  </div>
</template>

<script>
import { getCurrentPageParams } from '@/utils'
import { FIND_SHOP_GOODS_PAGE, UPDATE_GOODS_BATCH_API } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      list: [],
      alreadyLastPage: false,
      currentPage: 1,
      isShelf: ''
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.init()
  },
  methods: {
    init () {
      this.list = []
      this.currentPage = 1
      this.alreadyLastPage = false
      this.isShelf = getCurrentPageParams('isShelf')
      this.findDynaicInfoList()
    },
    selectCheck (val) {
      if (val.isSelect) {
        val.isSelect = false
      } else {
        val.isSelect = true
      }
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this.findDynaicInfoList()
      }
    },
    putawayClick () {
      const vm = this
      let putList = []
      vm.list.forEach(_ => {
        if (_.isSelect) {
          putList.push(_.goodsNo)
        }
      })
      if (!putList.length) {
        vm.$toast('请选择后再提交')
        return false
      }
      vm.updateGoodsBatchApi(putList)
    },
    updateGoodsBatchApi (list) {
      const vm = this
      let params = {
        goodsNoList: list,
        isShelf: vm.isShelf === '1' ? '0' : '1'
      }

      if (getCurrentPageParams('goodsTypeId')) {
        params.goodsTypeId = getCurrentPageParams('goodsTypeId')
      }

      UPDATE_GOODS_BATCH_API(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('操作成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    findDynaicInfoList () {
      const vm = this
      let params = {
        shopId: vm.account.shopId,
        isShelf: vm.isShelf
      }
      FIND_SHOP_GOODS_PAGE(params, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            list.forEach(_ => {
              if (_.imageList) {
                _.imageList = vm.imgListWay(_.imageList)
                _.createDate = vm.timeSplitWay(_.createDate)
              }
              _.isSelect = false
            })
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    printList (list, isFirst, isLast) {
      const vm = this
      if (isFirst) {
        vm.list = list
        if (isLast || !list.length) {
          vm.alreadyLastPage = true
        } else {
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        vm.list.push(...list)
        vm.alreadyLastPage = true
      } else {
        vm.list.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll-list {
  .contBox {
    padding: 15px;
    display: flex;
    align-items: center;
    .goodsImg {
      width: 80px;
      height: 80px;
    }
    .textInfo {
      font-size: 14px;
      margin-left: 20px;
      p {
        line-height: 20px;
      }
    }
  }
}
.kong {
  height: 35px;
}
.navClick {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 45px;
  border-radius: 25px;
  background: #e8e8e8;
  color: #000;
  display: flex;
  justify-content: center;
  p {
    width: 33.33%;
    font-size: 13px;
    text-align: center;
    line-height: 45px;
  }
}
</style>
